import mapboxgl from 'mapbox-gl';
import data2 from './abcd.json';

mapboxgl.accessToken ='pk.eyJ1Ijoid3p5YW5ndXN0IiwiYSI6ImNsNmRvN285YjA3cGozZ214MmVhMHlmOGIifQ.77ZY4WjcbmtmmPCkHO8xRA';

let is_pause = false;
// Haversine公式算法: 根据经纬度计算距离
//(lon为经度,lat为纬度)
const Haversine = (lon1, lat1, lon2, lat2) => {
    Number.prototype.deg2rad = function (deg) {
        return deg * (Math.PI / 180)
    };
    var dLat = 0..deg2rad(lat2 - lat1);
    var dLon = 0..deg2rad(lon2 - lon1);
    var a =Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(0..deg2rad(lat1)) * Math.cos(0..deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return c*6378;
}
const IsPause = () => {
    is_pause = true;
    document.getElementById("pause").textContent = '继续';
}
const IsContinue = () =>{
    is_pause = false;
    document.getElementById("pause").textContent = '暂停';
}

export const text1 = () => {
    is_pause = false;
    pause.onclick = function() {
        if(document.getElementById("pause").textContent == '暂停') IsPause();
        else IsContinue();
    };
    const map = new mapboxgl.Map({
        container: 'map',
        // 从地图盒的核心样式中进行选择，或使用地图盒工作室制作自己的样式
        style: 'mapbox://styles/wzyangust/clfy8cbuv000w01o3eyfhld7x',
        center: [103.5,32.4],
        zoom: 8
    });
    map.on('load', async () => {
        //在这里读取本地JSON文件
        let data = await $.getJSON('mmm.json');
        // 首先只显示第一个坐标
        data.features[0].geometry.coordinates = [[data2[0][0],data2[0][1]]];
        // 添加点位
        let flag=0; //判断是否多个数据是同一个点
        for(let i=1;i<data2.length;i++) {
            let lon1=data2[i-1][0];
            let lon2=data2[i][0]-data2[i-1][0];
            let lat1=data2[i-1][1];
            let lat2=data2[i][1]-data2[i-1][1];
            let pos=Haversine(data2[i-1][0], data2[i-1][1], data2[i][0], data2[i][1]);
            let n=0;
            if(i==1) n=20;
            else if(pos == 0 && flag == 0) {
                flag=1;
                data.features[0].geometry.coordinates.push([data2[i-1][0],data2[i-1][1]]);
            }
            else {
                n = parseInt(pos/2.8);
                flag=0;
            }
            for(let j=1;j<=n;j++) {
                data.features[0].geometry.coordinates.push([lon1+Math.random()%0.02-0.01,lat1+Math.random()%0.02-0.01]);
                lon1 += lon2/n;
                lat1 += lat2/n;
            }
        }
        const coordinates = data.features[0].geometry.coordinates;
        data.features[0].geometry.coordinates = [coordinates[0]];
        map.addSource('trace', { type: 'geojson', data: data });
        //这里是读取移动线条的属性
        map.addLayer({
            'id': 'trace',
            'type': 'line',
            'source': 'trace',
            'paint': {
                'line-color': "lightcyan",
                'line-opacity':0.7,
                'line-width': 4
            }
        });
        // 设置视口
        map.jumpTo({ 'center': coordinates[0], 'zoom': 7 });
        map.setPitch(40);
        let i=0;
        console.log(is_pause);
        const timer = setInterval(() => {
            if(!is_pause) {
                if (i < coordinates.length) {
                    data.features[0].geometry.coordinates.push(coordinates[i]);
                    map.getSource('trace').setData(data);
                    
                    map.panTo(coordinates[i]);
                    i++;
                } else {
                    window.clearInterval(timer);
                }
            }
        },40);
    });
}